<template>
  <div style="float: left;width: 800px">
    <el-upload action="" ref="upfile" class="upload-demo" style="float: left;" list-type="picture"
               :show-file-list="true"
               :auto-upload="true"
               :file-list="file_list"
               :http-request="handleUploadFile"
               :on-change="handleChange"
               :on-error="uploadFileError"
               :on-success="uploadFileSuccess"
               :on-exceed="handleExceed"
               :on-remove="handleRemove"
               :limit="max_file_length">
      <el-button size="medium" type="success" style="margin-left:10px">选择文件</el-button>
      <el-button size="medium" type="primary" @click.native.stop="handlerSaveFile" style="margin-left:10px">上传</el-button>
    </el-upload>
  </div>
</template>
<script>
import {mapMutations} from "vuex";
import {uploadBatch} from "@/components/upload/uploadApi";

export default {
  name: "uploadFiles",
  data() {
    return {
      id: 0,
      max_file_length: 999,
      file_list: [],
    }
  },
  props: {
    fileId: {type: [Object, Number], default: 0},
    imgs: {type: [Object, Array]}
  },
  computed: {},
  methods: {
    ...mapMutations(['add_tab']),
    handleInit() {
      this.file_list = [];
    },
    async handleUploadFile() {
      await uploadBatch(this.file_list);
    },
    handlerSaveFile() {
      this.$emit("fMethod", this.file_list);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 ${this.max_file_length} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    handleRemove(file, Logofile_list) {
      this.file_list = Logofile_list;
    },
    handleChange(file, file_list) {
      if (file.status === 'ready') {
        this.file_list = file_list;
      }
      if (file.status === 'finished') {
        this.$message.success('上传成功');
      }
    },
    uploadFileSuccess(response, file, fileList) {
      console.log("uploadSuccess", response, file, fileList);
    },
    uploadFileError(err, file, fileList) {
      this.$message.error(`上传失败！本次选择了 ${file.length} 个文件，共选择了 ${file.length + fileList.length} 个文件` + err)
    },
  },
  created() {

  },
  mounted() {
  },
  watch: {
    fileId: {
      immediate: true,
      handler(fileId, imgs) {
        this.id = fileId;
        this.file_list = imgs;
      }
    }
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #FFFFFF;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #FFFFFF;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #FFFFFF;
}
</style>